<!--{template common/container/pc/header_start}-->
<link rel="stylesheet" href="static/scss/default/index.css?{VERHASH}">
<link rel="stylesheet" href="{MOD_PATH}/template/admin/pc/assets/css/basic.css?{VERHASH}">
<!--{template common/container/pc/header_end}-->
<div id="dzzoffice">
	<el-container>
		<el-header class="page-header"  height="60px">
            <!--{template admin/pc/components/header}-->
        </el-header>
		<el-container>
		    <el-aside class="page-left" width="200px">
				<!--{template admin/pc/components/left}-->
			</el-aside>
			<el-container>
				<el-header class="page-header" height="50px">
					<span>基本信息</span>
				</el-header>
				<el-main style="padding: 0px;overflow: hidden;position: relative;">
					<el-scrollbar>
						<div class="content" style="padding: 16px 25px;">
							<el-form ref="form" :model="formdata" label-width="200px">
								<!-- <el-form-item label="本机地址：">
									<el-input class="maxWidth" v-model="formdata.sitename"></el-input>
									<p class="tipTxt">用于服务器本机访问</p>
								</el-form-item>
								<el-form-item label="网络地址：">
									<el-input class="maxWidth" v-model="formdata.sitename"></el-input>
									<p class="tipTxt">用于内网其它电脑、手机、平板访问</p>
								</el-form-item> -->
								<!-- <el-form-item label="设备号：">
									<el-input class="maxWidth" v-model="formdata.sitename"></el-input>
									<p class="tipTxt">服务器识别码，用于与商业功能绑定</p>
								</el-form-item> -->
								<el-form-item label="站点LOGO：">
									<el-upload
										class="avatar-uploader"
										:action="MOD_URL+'&op=admin&do=uploadlogo'"
										name="file"
										accept="image/png,image/svg"
										:on-success="handleLogoSuccess"
										:on-progress="handleLogoProgress"
										:before-upload="beforeLogoUpload"
										:show-file-list="false">
										<el-progress v-show="ispercentage" type="circle" :width="148" :percentage="percentage"></el-progress>
										<template v-if="imageUrl">
											<el-image fit="contain" :src="imageUrl">
												<template #error><div class="el-image__placeholder"></div></template>
											</el-image>
										</template>
										<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
										<template #tip>
											<div class="el-upload__tip">
												只能上传png文件，且不超过2M
											</div>
										</template>
									</el-upload>
								</el-form-item>
								<el-form-item label="站点名称：">
									<el-input class="maxWidth" v-model="formdata.sitename"></el-input>
									<el-text style="width: 100%;" tag="p" size="small">站点名称或简称，将显示在浏览器窗口标题等位置</el-text>
								</el-form-item>
								<el-form-item label="备案信息：">
									<el-input class="maxWidth" v-model="formdata.sitebeian"></el-input>
									<el-text style="width: 100%;" tag="p" size="small">支持html代码，面板可视区域大小为：263*235</el-text>
								</el-form-item>
								<el-form-item label="站点关键词：">
									<el-input class="maxWidth" type="textarea" autosize v-model="formdata.metakeywords"></el-input>
									<el-text style="width: 100%;" tag="p" size="small">平台SEO关键词</el-text>
								</el-form-item>
								<el-form-item label="站点描述：">
									<el-input class="maxWidth" type="textarea" autosize v-model="formdata.metadescription"></el-input>
									<el-text style="width: 100%;" tag="p" size="small">平台SEO关键词</el-text>
								</el-form-item>
								<el-form-item label="第三方统计代码：">
									<el-input class="maxWidth" type="textarea" autosize v-model="formdata.statcode"></el-input>
									<el-text style="width: 100%;" tag="p" size="small">支持html代码</el-text>
								</el-form-item>
								<el-form-item label="虚拟路径：">
									<el-radio-group v-model="formdata.pathinfo">
										<el-radio border :label="0">关闭</el-radio>
										<el-radio border :label="1">开启</el-radio>
									</el-radio-group>
								</el-form-item>
								<el-form-item label="站点公开：">
									<el-radio-group v-model="formdata.overt">
										<el-radio border label="1">是</el-radio>
										<el-radio border label="0">否</el-radio>
									</el-radio-group>
									<el-text style="width: 100%;" tag="p" size="small">站点公开后任何人无需登录即可浏览站点内容</el-text>
								</el-form-item>
								<el-form-item label="站点关闭：">
									<el-radio-group v-model="formdata.bbclosed">
										<el-radio border label="1">是</el-radio>
										<el-radio border label="0">否</el-radio>
									</el-radio-group>
									<el-text style="width: 100%;" tag="p" size="small">暂时将平台关闭，其他人无法访问，但不影响管理员访问</el-text>
								</el-form-item>
								<el-form-item v-show="formdata.bbclosed == '1'" label="关闭平台的原因：">
									<el-input class="maxWidth" v-model="formdata.closedreason" type="textarea" autosize placeholder="">
									</el-input>
									<el-text style="width: 100%;" tag="p" size="small">平台关闭时出现的提示信息</el-text>
								</el-form-item>
								<el-form-item>
									<el-button type="primary" @click="handleSubmit" :loading="btnloading">保存更改</el-button>
								</el-form-item>
							</el-form>
						</div>
					</el-scrollbar>		
				</el-main>
			</el-container>
		    
		  </el-container>
	</el-container>
</div>
<script type="text/javascript">
	const { createApp, reactive, toRefs, toRef, ref, onMounted, nextTick, watch } = Vue;
	const dzzoffice = createApp({
		data() {
			return {
				percentage:0,
				ispercentage:false,
				btnloading:false,
				formdata:{
					// sitelogo:'$setting[sitelogo]',//平台LOGO
					sitename:'',//平台名称
					sitebeian:'',//备案信息
					metakeywords:'',//关键词
					metadescription:'',//平台描述
					statcode:'',//统计代码
					overt:'',//公开
					pathinfo:0,//虚拟路径
					bbclosed:'',//关闭平台
					closedreason:'',//关闭平台的原因,
				},
				imageUrl: 'data/attachment/sitelogo/sitelogo.png?{VERHASH}',
			}
		},
		created() {
			var self = this;
			
			this.GetData();
		},
		mixins:[LeftMixin],
		methods: {
			async GetData(){
				var self = this;
				var res = await axios.post(MOD_URL+'&op=admin&do=basic&operation=basic&type=getdata');
				if(res == 'intercept'){
					return false;
				}
				var json = res.data;
				var setting = json.data;
				self.formdata = {
					// sitelogo:'$setting[sitelogo]',//平台LOGO
					sitename:setting.sitename,//平台名称
					sitebeian:setting.sitebeian,//备案信息
					metakeywords:setting.metakeywords,//关键词
					metadescription:setting.metadescription,//平台描述
					statcode:setting.statcode,//统计代码
					overt:setting.overt,//公开
					pathinfo:setting.pathinfo?parseInt(setting.pathinfo):0,
					bbclosed:setting.bbclosed,//关闭平台
					closedreason:setting.closedreason,//关闭平台的原因,
				};
			},
			beforeLogoUpload(file){
				var self = this;
				var isJPG = file.type === 'image/png';
				var isLt2M = file.size / 1024 / 1024 < 2;
				if (!isJPG) {
				  	self.$message.error('站点LOGO只能是 PNG 格式!');
				}
				if (!isLt2M) {
				  	self.$message.error('站点LOGO大小不能超过 2MB!');
				}
				return isJPG && isLt2M;
						
				self.ispercentage = true;
			},
			handleLogoSuccess(res, file){
				var random = Math.floor(Math.random()*50); 
				this.imageUrl = 'data/attachment/sitelogo/sitelogo.png?'+random;
			},
			handleLogoProgress(event, file, fileList) {
				var percent = parseInt(event.percent);
				this.percentage = percent;
				if(percent == 100){
					this.ispercentage = false;
					this.percentage = 0;
				}
			},
			async handleSubmit() {
				var self = this;
				self.btnloading = true;
				var res = await axios.post(MOD_URL+'&op=admin&do=basic',{
					ajax_submit:1,
					settingsubmit:true,
					formhash:'{FORMHASH}',
					settingnew:self.formdata,
				});
				if(res == 'intercept'){
					return false;
				}
				var data = res.data;
				if(data){
					self.$message({
						type:'success',
						message:'保存成功'
					});
				}else{
					self.$message.error('保存失败');
				}
				self.btnloading = false;
			},
		},
		mounted() {}
	});
	dzzoffice.use(ElementPlus, {
		locale: ElementPlusLocaleZhCn,
	});
	for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
		dzzoffice.component(key, component)
	}
	dzzoffice.component('comavatar', comavatar);
	// 屏蔽警告信息
	dzzoffice.config.warnHandler = function(){return null};
	dzzoffice.mount('#dzzoffice');
</script>

<!--{template common/container/pc/footer}-->
